<template>
    <div class="totalLayout"  >

        <el-row type="flex"   justify="space-around" style="height: 100%;width: 100%">
<!--            个人信息界面-->
            <el-col :span="11" class="partStyle">
                <el-card class="profileCard">
<!--                        头像上传界面-->
                    <div >
                        <el-upload
                                class="avatar-uploader"
                                :action="actionUrl"
                                :show-file-list="false"
                                :headers="headerObjs"
                                :on-success="handleAvatarSuccess">
                            <img v-if="currentUser.avatarUrl" :src="currentUser.avatarUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
<!--                        个人信息修改界面-->
                    <div>
                        <el-row   justify="space-around">
                            <el-col :span="22">
                                <span class="inputTextStyle">用户名：</span>
                                <el-input
                                        prefix-icon="el-icon-search"
                                        class="profileInputStyle"
                                        disabled
                                        v-model="currentUser.username">
                                </el-input>
                            </el-col>
                            <el-col :span="22">
                                <span class="inputTextStyle">昵称：</span>
                                <el-input
                                        placeholder="请输入昵称"
                                        prefix-icon="el-icon-search"
                                        class="profileInputStyle"
                                        v-model="currentUser.nickname">
                                </el-input>
                            </el-col>
                            <el-col :span="22">
                                <span class="inputTextStyle">地址：</span>
                                <el-input
                                        placeholder="请输入地址"
                                        prefix-icon="el-icon-search"
                                        class="profileInputStyle"
                                        v-model="currentUser.address">
                                </el-input>
                            </el-col>
                            <el-col :span="22">
                                <span class="inputTextStyle">邮箱：</span>
                                <el-input
                                        placeholder="请输入内容"
                                        prefix-icon="el-icon-search"
                                        class="profileInputStyle"
                                        v-model="currentUser.email">
                                </el-input>
                            </el-col>
                        </el-row>
                    </div>
<!--                    保存修改-->
                    <div>
                        <el-row type="flex"   justify="space-around" style="text-align: center;margin-top: 10px;">
                            <el-col>
                                <el-button type="primary" @click="saveUserInfo">保存修改</el-button>
                            </el-col>
                        </el-row>
                    </div>

                </el-card>

            </el-col>
<!--            密码修改界面-->
            <el-col :span="11" class="partStyle">
                <el-card class="box-card" >
                    <el-form :model="updatePasswordForm" status-icon :rules="rules" ref="updatePasswordForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="原密码" prop="oldPassword">
                            <el-input type="password" v-model="updatePasswordForm.oldPassword" ></el-input>
                        </el-form-item>
                        <el-form-item label="现密码" prop="newPassword">
                            <el-input type="password" v-model="updatePasswordForm.newPassword" ></el-input>
                        </el-form-item>
                        <el-form-item label="确定密码" prop="checkNewPassword">
                            <el-input type="password" v-model="updatePasswordForm.checkNewPassword"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitPasswordForm">提交</el-button>
                            <el-button @click="resetPasswordForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>




    </div>
</template>

<script>
    import {constants} from "@/common/constants";

    export default {
        name: "ProfileComponent",
        data(){
            //验证旧密码规则
            let checkOldPassword = (rule, value, callback) => {
                if (value==="") {
                    callback(new Error('请输入原密码'));
                }else {
                    if (value.length<3 || value.length>10) {
                        callback(new Error('原密码在3-10之间'));
                    }
                    callback();
                }
            };
            //验证新密码规则
            let validateNewPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (value.length <3 || value.length>10) {
                        callback(new Error('原密码在3-10之间'));
                    }
                    callback();
                }
            };
            //二次确认规则
            let validateNewPassword2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.updatePasswordForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                currentUser: {},      //当前用户
                actionUrl:"http://"+constants.server+":"+constants.port+"/index/attach/upload" ,//上传url
                headerObjs:{
                    token: "",
                },  //设置头像上传的请求头
                updatePasswordForm:{}, //修改密码的form
                rules: {
                    oldPassword: [
                        { validator: checkOldPassword, trigger: 'blur' }
                    ],
                    newPassword: [
                        { validator: validateNewPassword, trigger: 'blur' }
                    ],
                    checkNewPassword: [
                        { validator: validateNewPassword2, trigger: 'blur' }
                    ]
                },          //表单验证


            }
        },
        created() {
            this.mySetItem("breadCrumb",JSON.stringify("个人管理"));
            this.reload();
        },
        methods:{
            //加载界面
            reload(){
                this.currentUser=JSON.parse(localStorage.getItem("user"));
                this.headerObjs.token=this.currentUser.token;

            },
            //保存用户信息
            saveUserInfo(){
                this.request.post("/index/user/saveUserInfo",this.currentUser).then(res=>{
                    if (res.code=="200"){
                        this.$message({
                            message: "修改用户成功",
                            type: 'success'
                        });
                        res.data.token=this.currentUser.token;
                        res.data.rememberMe=this.currentUser.rememberMe;
                        this.mySetItem("user",JSON.stringify(res.data));
                        this.reload();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //图片上传成功之后执行的方法
            handleAvatarSuccess(res){
                if (res.code=="200"){
                    this.currentUser.avatarUrl=res.data;
                }
            },
            //重置密码修改表格
            resetPasswordForm(){
                this.updatePasswordForm={};
            },
            //提交修改密码
            submitPasswordForm(){
                this.$refs['updatePasswordForm'].validate((valid) => {
                    if (valid) {
                        this.request.get("/index/user/saveUserPassword",{
                            params:{
                                id: this.currentUser.id,
                                oldPassword: this.updatePasswordForm.oldPassword,
                                newPassword: this.updatePasswordForm.newPassword,
                            }
                        }).then(res=>{
                            if (res.code=="200"){
                                this.$message({
                                    message: "修改密码成功",
                                    type: 'success'
                                });
                                this.resetPasswordForm();
                                this.currentUser.token=res.data;
                                localStorage.setItem("user",JSON.stringify(this.currentUser));
                            }else{
                                this.$message({
                                    message: res.data,
                                    type: 'error'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            message: "输入不符合规则，请重新输入",
                            type: 'error'
                        });
                    }
                });

            }

        },

    }
</script>

<style scoped>

    .totalLayout{
        height:100%;
        width:100%
    }

    .inputTextStyle{
        width: 20%;
        display: inline-block;
        text-align: right;

    }

    .profileInputStyle{
        margin: 10px 20px;
        width: calc(80% - 40px);
        display: inline-block;
    }

    .partStyle{
        margin: 20px 0px;
        height: 100%;
    }

    /deep/ .el-card__body{
        min-height: 700px;
    }

    .partStyle {
        height: fit-content;
    }

    /deep/ .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    /deep/ .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    /deep/ .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    /deep/ .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .avatar-uploader{
        text-align: center;
    }







</style>